<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>



  <template id="temp1">
    <!-- 只能有一个根元素 -->
    <div>
      <!-- 给想要获取的元素 加ref 如果ref的值相同，只能获取一个，后面的覆盖前面的-->
      <h1 ref="box">{{a}}</h1>
      <!-- 通过循环到的元素，加上ref 得到的值是一个数组 如果再这里修改 -->
      <p ref="p" v-for="item in list">{{item}}</p>
    </div>
  </template>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>


  <script>
    let vm = new Vue({
      el: '#app',
      // 如果有template，将它作为渲染元素，如果没有template，将el作为渲染元素
      template: '#temp1',
      // 有了template 直接把#app给换掉
      data:{
        a:'zf',
        list:[1,2,3]
      },
      beforeCreate(){
        // 数据初始化之前，获取不到data中的数据 
        // console.log(this.a)
      },
      created(){
        // 数据初始化完成，可以获取data，用来请求数据
        // 只是数据有了，还没有渲染到页面
        // console.log(this.a)
        // console.log(this.$refs.box) 获取不到dom
      },
      // 只有没有el才会找,vm.$mount(el) 
      // 有没有template属性
      beforeMount(){
        // 挂载之前，判断渲染模板是否正确
        // console.log(this.$el)
      },
      mounted(){
        // 挂载完成，视图就渲染了 渲染后真是的dom
        // 渲染完成再执行，内容变成5个
        // 渲染页面，渲染dom是异步的，这里依然是渲染之前的dom，
        this.list = [1,2,3,4,5]
        // console.log(this.$refs.p.length)


        // 等dom渲染完成之后再去执行 
        this.$nextTick(() => {
          // 为了保证元素的真实性，是更新后的元素
          console.log(this.$refs.p.length)
        })
        
        
      },
      // 数据更新之前
      beforeUpdate(){
        console.log('数据更新之前')
      },
      // 数据更新完成
      updated(){
        console.log(this.$refs.p.length)
        console.log('数据更新之后')
      },
      beforeDestroy(){
        console.log('销毁之前')
      },
      destroyed(){
        console.log('销毁后')
      }
      
    })
    
     /**
        表达式向他人传递我们内心思想感情，让他人理解我们的思想感情

        心理包裹：总想表现好，害怕出丑
        现在你们的联系只能通过百度新闻，综艺节目联系了吗

        聊韩剧，聊美食
          你没有看过这个韩剧，也没有认识的明星，感觉都聊不下去了，
          聊这个看韩剧的软件，
        问题出在哪里
            1，氛围紧张和尴尬，彼此都fengkuang寻找话题，自身的情绪紧张感染到彼此，
                解决：让自己轻松，自然的介绍自己和询问对方信息
                      1，这个问题我想和你聊。2，自然而然的就能把话说下去，不需要费
                      给自己的话设置足够多关键词；充分挖掘关键词
            2，当有话题时，不知道怎么接，草草两句结束
            3，不会主动寻找话题
      */ 
  </script>
</body>
</html>